// const app = document.getElementById('app');

// 面向过程的写法
// 缺点：代码冗余，难于维护
// const header = document.createElement('div');
// header.innerHTML = "Header";
// app.appendChild(header);

// const content = document.createElement('div');
// content.innerHTML = "Content";
// app.appendChild(content);

// const footer = document.createElement('div');
// footer.innerHTML = "Footer";
// app.appendChild(footer);


// 面向对象的写法
// 缺点：
// 导入顺序不对可能会引发错误
// 需要引入多个包对性能有影响
// const app = document.getElementById('app');
// new Header();
// new Content();
// new Footer();


// webpack
import Header from './header.js';
import Conotent from './content.js';
import Footer from './footer.js';